<template>
  <div class="datail">
    <div class="addGoods" @click="add">添加</div>
    <form action="/">
      <van-search
        v-model="sea"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="searchHistory" v-if="flag">
      <div class="top">
        <p>搜索历史</p>
        <i class="van-icon van-icon-delete" @click="clear"></i>
      </div>
      <div class="history">
        <van-tag round v-for="(item,i) in historysearch" :key="i">{{item}}</van-tag>
      </div>
    </div>
    <div v-if="flag1">
      <van-swipe-cell v-for="item in prodList" :key="item.id">
        <van-cell :title="item.name" :value="'商品上架时间：' + item.ctime.split('T')[0]" />
        <template slot="right">
          <van-button square type="danger" text="删除" @click="del(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { Dialog, Notify } from 'vant'
import { async } from 'q'
export default {
  data() {
    return {
      sea: '123',
      flag: true,
      flag1: false,
      prodList: [],
      historysearch: []
    }
  },
  methods: {
    getHistorySearch() {
      this.historysearch = JSON.parse(
        window.localStorage.getItem('historysearch')
      )
    },
    onCancel() {
      this.sea = ''
      this.flag = true
      this.flag1 = false
    },
    async onSearch(value) {
      const { data: res } = await this.$http.get('/api/getprodlist')
      if (res.status !== 0) {
        return this.$toast.fail('获取数据失败!')
      }
      this.prodList = res.message
      this.flag = false
      this.flag1 = true
      if (this.historysearch === null) {
        this.historysearch = []
        this.historysearch.push(value)
      } else if (this.historysearch.indexOf(value) === -1) {
        this.historysearch.push(value)
      }
      localStorage.setItem('historysearch', JSON.stringify(this.historysearch))
    },
    del(id) {
      Dialog.confirm({
        title: '警告',
        message: '是否确认删除该商品？'
      })
        .then(async () => {
          const { data: res } = await this.$http.get(`/api/delproduct/${id}`)
          if (res.status !== 0) {
            return this.$toast.fail('删除失败')
          }
          this.$toast.success('删除成功')
          this.onSearch()
        })
        .catch(() => {
          Notify('已取消删除')
        })
    },
    clear() {
      window.localStorage.removeItem('historysearch')
      this.getHistorySearch()
    },
    add() {
      this.$router.push('/addgoods')
    }
  },
  created() {
    this.getHistorySearch()
  }
}
</script>

<style lang="less" scoped>
.searchHistory {
  .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
  }
  .history {
    padding: 5px 10px;
    .van-tag {
      margin: 0 5px;
    }
  }
}
.addGoods {
  position: fixed;
  top: 10px;
  font-size: 13px;
  color: #fff;
  right: 10px;
  z-index: 2;
}
</style>
